/**@author Jason 吕建辉
 * @data 2018-04-07
 * @描述：模板组件采用 layui-2.2.6 操作手册可参考管饭文档
 */
//提取弹窗组件为公共
var layer;
layui.use(['table','layer','form'],function(){
    var table = layui.table,form = layui.form;
    layer = layui.layer;
    var tableIns = table.render({
        elem: '#menuList',
        url: '/rbac/menu/list',
        where: $('#searchFrom').containerJson(),
        method: 'get', //如果无需自定义HTTP类型，可不加该参数
        request: pageRequest,
        response: pageResponse,
        page: pagenation,
        cellMinWidth: 60,//全局定义常规单元格的最小宽度
        cols: [[
            {
                field: 'name',
                title: '菜单名称',
                align: 'center'
            }, {
                field: 'link',
                title: '菜单路径',
                align: 'center'
            }, {
                field: 'icon',
                title: '菜单图标',
                align: 'center',
                templet: function (d) {
                    if (d.icon){
                        return '<i class="layui-icon" style="font-size: 16px">' + d.icon +'</i>';
                    }else {
                        return '';
                    }
                }
            }, {
                field: 'level',
                title: '菜单等级',
                align: 'center',
                templet: function (d) {
                    var str = '';
                    if (0 == d.level) {
                        str = '根菜单'
                    } else if (1 == d.level) {
                        str = '一级菜单'
                    } else if (2 == d.level) {
                        str = '二级菜单'
                    }
                    return str;
                }
            }, {
                field: 'parentName',
                title: '上级菜单',
                align: 'center'
            }, {
                fixed: 'right',
                title: '操作',
                align: 'center',
                // templet: operation()
                toolbar: '#toolbar'
            }]]
    });
    // 绑定操作
    var $2 = layui.$, active = {
        reset: function () {//重置
            clearSearch();
        },
        add: function () {//新增
            $('#addOrUpdate').form('clear');
            $('#parent').show();
            openForm('addOrUpdate', tableIns);
        }
    };
    $2('.layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    //监听 查询表单提交
    form.on('submit(search)',function (data) {
        reloadTable(tableIns, data.field);
        return false;//防止页面刷新
    });
    //监听 下拉框选中
    form.on('select(level)',function (data) {
        var value = data.value;
        $('#parent').show();
        if (value == 0){
            $('#parent').hide();
        }
    });
    //表格最后一列操作按钮监听
    table.on('tool(table)', function (obj) {
        var data = obj.data;
        if (obj.event === 'del') {
            deleteById(obj);
        } else if (obj.event === 'edit') {
            $('#addOrUpdate').form('load',data);
            $('#pid').val(data.pid);
            $('#level').val(data.level);
            if (data.level == 0) {
                $('#pid').prop('disabled', 'disabled');
            }
            form.render('select');//渲染下拉框，必须加，不然不起作用
            openForm('addOrUpdate', tableIns);
        }
    });
});
//清空查询条件
function clearSearch() {
    $('.layui-input').val("");
}
//打开表单
function openForm(formId, table) {
    layer.open({
        type: 1,
        title: '菜单操作',
        shadeClose: true,
        skin: 'layui-layer-rim',
        anim: 2,
        shade: 0.3,
        maxmin: true,
        area: ['50%', '95%'],
        content: $('#' + formId), //用id时 ，type 必须 =1
        btn: ['提交'],
        yes: function (i) {
            commitFrom(table);
        }
    });
}
//新增 or 更新 提交表单
function commitFrom(table) {
    var data = $('#addOrUpdate').serializeJson();
    if(data.level == null || data.level == undefined || data.level == ''){
        layer.msg('菜单等级不能为空');
        return false;
    }else if(data.level != 0){
        if (data.pid == null || data.pid == undefined || data.pid == ''){
            layer.msg('非根菜单必须选择上级菜单');
            return false;
        }
    }
    if (data.level == 0){
        data.pid = 0;
    }
    var url = '/rbac/menu/update';
    if (!data.id || data.id == null || data.id == '') {
        url = '/rbac/menu/add';
    }
    $.ajax({
        url:url,
        data: data,
        method:'post',
        success:function (res) {
            if (res.flag){
                layer.closeAll();
                layer.msg('操作成功', {time: 2000}, function () {
                    reloadTable(table, $('#searchForm').serializeJson());
                });
            }else {
                layer.msg(res.msg,{time:2000});
            }
        }
    })
}

function reloadTable(tableIns, data) {
    tableIns.reload({
        page: {curr: 1},
        where: data
    });
}

function deleteById(obj) {
    layer.confirm('真的删除行么', function (index) {
        $.ajax({
            url: 'rbac/menu/delete',
            method: 'post',
            data: {
                menuId: data.id
            },
            success: function (res) {
                if (res.flag) {
                    obj.del();
                    layer.close(index);
                } else {
                    layer.msg(res.msg, {time: 2000})
                }
            }
        });
    });
}
$(document).ready(function () {
    initData();
});
function initData() {
    $.ajax({
        url:'/rbac/menu/all',
        method:'get',
        async: false,
        success:function (res) {
            if(res.flag){
                $.each(res.data,function (index,val) {
                    var option = $('<option value="'+ val.id +'">'+ val.name+'</option>');
                    $('#pid').append(option);
                })
            }
        }
    })
}
//获取所有layui图标矢量库
function chooseIcon() {
    layer.open({
        type: 1,
        title: '系统菜单图标',
        skin: 'layui-layer-rim',
        anim: 2,
        shade: 0.3,
        offset: 'r',
        maxmin: true,
        area: ['50%', '100%'],
        content: $('#icons')
    });
}
$('#icons li').click(function () {
    $('#icons li').css({color:''});
    $(this).css({color:'blue'});
    $('#icon').val($(this).find(".code").text());
});
